<?php $this->view->partial('common/profilecard'); ?>
<script src="<?= BASE_URI ?>public/vendor/Mustache/mustache.js-master/mustache.js"></script>
<div class="profile-dn row" style="margin-top:-2rem;">
	<div class="profile-wall medium-10 medium-centered large-10 large-centered column">
		<div class="profile-left-wall medium-7 large-7 columns">

			  <div id="contentstage" class="large-12 column" style="padding:0;">
				<div class="grouptabxy large-12 column" style="padding:0;">
					<div id="tabs" class="tabs">
						<nav class="group-ultab large-12 column" style="background:white;margin-bottom:1rem;border-radius:.45rem;padding:0;">
							<ul>
								<li><a href="#section-1"style="color:#000 !important;"><span> Followed Groups</span> <span class="round success label"> 2</span></a></li>
								<li><a id="myGroups" href="#section-2"style="color:#000 !important;"><span> My Groups</span> <span class="round success label">
									<?= GroupMembers::find(array(
										"conditions"=>"user_id = ?0",
										"bind"=>array(0=>$_GET['bhd'])
									))->count() ?>
							</span></a></li>
							<?php if($this->session->get('user_id') == $_GET['bhd']){ ?>
								<li><a href="#section-3"style="color:#000 !important;" data-reveal-id="createGroup"><span> Create</span></a></li>
							<?php }?>
							</ul>
						</nav>
						<div class="result-wrapper content" style="margin-top:3.5rem;background:white;border-radius:.45rem;padding:0;">
							<section class="search-grid medium-12 column" id="section-1" style="padding:0;">
								<?php $this->view->partial('profile/followedgroup'); ?>
							</section>
							<section id="myGroupContainer" class="search-grid medium-12 column" id="section-2" style="padding:0;">
								<?php $this->view->partial('profile/mygroup'); ?>
							</section>
							<section class="search-grid medium-12 column" id="section-3" style="padding:0;">
								
							</section>
						</div><!-- /content -->
					</div><!-- /tabs -->
				</div>
			  </div>
		</div>
		<div class="profile-right-wall medium-5 column" style="margin-top:1rem;">
			<?php $this->view->partial('common/suggested_groups'); ?>		
		</div>
	</div>
</div>
<?php $this->view->partial('common/groupmodal'); ?>
<script src="<?= BASE_URI ?>js/cbpFWTabs.js"></script>
<script>
	new CBPFWTabs( document.getElementById( 'tabs' ) );
</script>

<!--
<script type="text/javascript" language="javascript">
   $(document).ready(function() {
      $("#followedgroups").click(function(event){
          $('#groupoptx').load('profile/followedgroup');
      });
      $("#mygroup").click(function(event){
          $('#groupoptx').load('profile/mygroup');
      });
   });
</script>

<script type="text/javascript">
	$(document).ready(function() {
		$("#followedgroups").css("fontWeight", "bold");
			
		$("li").on("click", function (e) {
		    e.preventDefault();
		    $(this).siblings("li").css("fontWeight", "normal");
		    $(this).css("fontWeight", "bold");
		});
	});
</script>
-->
<script type="text/javascript">
	function listGroup(){
		var user_id = "<?=$_GET['bhd']?>";
		
		return $.ajax({
			url: URL + 'group/list/' + user_id,
			dataType: 'json'
		});
	}
	function getGroupHtml(name,privacy,cover_photo,category,icon,group_id,total_past_events,total_group_members,total_incoming_events)
	{
		var data = {
	 	 	name : name,
			privacy : "Private",
			cover_photo : cover_photo,
			category : category,
			icon : icon,
			group_id : group_id,
			total_past_events: total_past_events,
			total_group_members: total_group_members,
			total_incoming_events:total_incoming_events
 	 	};
	
		var template = $('#groupsTpl').html();
		var html = Mustache.to_html(template,data);
		return html;
	}
	$('#myGroups').on('click',function(){
		listGroup().done(function(result){
			$('#myGroupContainer').html('');
			var content = '';
			$(result).each(function(i,val){
			
				var html = getGroupHtml(val.name,val.privacy,val.cover_photo,val.category,val.icon,val.group_id,val.total_past_events,val.total_group_members,val.total_incoming_events);
				content += html;
			});
			$('#myGroupContainer').html(content);
		});
	
	});
</script>